<template>
  <div class="login">
    <!-- 内容 -->
    <div class="login_box">
      <div class="left">
        <img src="../../assets/imgs/Automate Software Testing.png" alt="" />
      </div>
      <div class="right">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我是老师" name="teacher">
            <div class="form">
              <el-form
                :model="form"
                :rules="rules"
                ref="form"
                @keyup.enter.native="loginClick()"
                status-icon
              >
                <!-- 电话 -->
                <el-form-item prop="phone">
                  <el-input
                    v-model="form.phone"
                    placeholder="请输入账号或手机号"
                    autocomplete="off"
                  >
                    <i
                      slot="prefix"
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <img
                        style="width: 16px; height: 16px"
                        src="../../../static/img/input_user.png"
                        alt
                      />
                    </i>
                  </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                  <el-input
                    type="password"
                    v-model="form.password"
                    placeholder="请输入密码"
                    :show-password="true"
                    autocomplete="off"
                  >
                    <i
                      slot="prefix"
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <img
                        style="width: 16px; height: 16px"
                        src="../../../static/img/input_password.png"
                        alt
                      /> </i
                  ></el-input>
                </el-form-item>
                <!-- 验证码 -->
                <!-- <template>
                  <el-form-item prop="captcha" class="code">
                    <el-input
                      v-model="form.captcha"
                      placeholder="验证码"
                      autocomplete="off"
                    ></el-input>
                    <div class="key">
                      <img
                        class="yan"
                        :src="captchaPath"
                        @click="getCaptcha()"
                        alt=""
                      />
                    </div>
                  </el-form-item>
                </template> -->
                <!-- 登录 -->
              </el-form>
              <!-- 登录 -->
              <el-button type="primary" class="btn" @click="loginClick()"
                >登录</el-button
              >
              <div class="auxiliary">
                <!-- <span>忘记密码</span>
                <span>注册</span> -->
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我是学生" name="students">
            <div class="form">
              <el-form
                :model="form"
                :rules="rules"
                ref="form"
                @keyup.enter.native="loginClick()"
                status-icon
              >
                <!-- 电话 -->
                <el-form-item prop="phone">
                  <el-input
                    v-model="form.phone"
                    placeholder="请输入账号或手机号"
                    autocomplete="off"
                  >
                    <i
                      slot="prefix"
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <img
                        style="width: 16px; height: 16px"
                        src="../../../static/img/input_user.png"
                        alt
                      />
                    </i>
                  </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                  <el-input
                    type="password"
                    v-model="form.password"
                    placeholder="请输入密码"
                    :show-password="true"
                    autocomplete="off"
                  >
                    <i
                      slot="prefix"
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <img
                        style="width: 16px; height: 16px"
                        src="../../../static/img/input_password.png"
                        alt
                      />
                    </i>
                  </el-input>
                </el-form-item>
                <!-- 验证码 -->
                <!-- <el-form-item prop="captcha"
                              class="code">
                  <el-input v-model="form.captcha"
                            placeholder="验证码"
                            autocomplete="off"></el-input>
                  <div class="key">
                    <img :src="captchaPath"
                         @click="getCaptcha()"
                         alt="">
                  </div>
                </el-form-item> -->
                <!-- 登录 -->
              </el-form>
              <!-- 登录 -->
              <el-button type="primary" class="btn" @click="loginClick()"
                >登录</el-button
              >
              <div class="auxiliary">
                <!-- <span>忘记密码</span>
                <span>注册</span> -->
              </div>
            </div>
          </el-tab-pane>
          <div class="account">
            <div class="account_left">
              <el-button type="text" class="lv">验证码登录</el-button>
            </div>
            <div class="account_right">
              <el-button type="text" class="hui">忘记密码</el-button>
              <el-button
                type="text"
                class="lv"
                @click="$router.push({ name: 'register' })"
                >立即注册</el-button
              >
            </div>
          </div>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
import { getUUID } from '@/utils'
export default {
  data() {
    return {
      form: {
        phone: '13267223770',
        password: '123456',
        code: '',
        captcha: '',
        uuid: ''
      },
      userMsg: {},
      reqMsg: {},
      rules: {
        phone: [
          { required: true, message: '请输入账号', trigger: 'change' }
          // {
          //   min: 11,
          //   max: 11,
          //   message: '请输入正确手机号码',
          //   trigger: 'change'
          // }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
          // {
          //   min: 6,
          //   max: 12,
          //   message: '请输入6到12位长度密码',
          //   trigger: 'change'
          // }
        ],
        captcha: [
          // { required: true, message: '请输入验证码', trigger: 'change' }
          // {
          //   min: 4,
          //   max: 4,
          //   message: '请正确输入验证码',
          //   trigger: 'change'
          // }
        ]
      },
      captchaPath: '',
      // teacher/students默认选项
      activeName: 'teacher'
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    // 获取验证码
    getCaptcha() {
      this.form.uuid = getUUID()
      // this.captchaPath = this.$http.uuidUrl(`captcha.jpg?uuid=${this.form.uuid}`)
      this.captchaPath = `http://47.97.220.184:8912/weisui/captcha.jpg?uuid=${this.form.uuid}`
      // this.form.uuid = ''
    },
    // 登录
    loginClick() {
      this.$refs.form.validate(result => {
        if (result) {
          this.$http({
            url: this.$http.userUrl('loginOpenByPwd'),
            method: 'get',
            params: {
              'account': this.form.phone,
              'password': md5(this.form.password)
              // 'loginType': 'web'
            }
          }).then(({ data }) => {
            console.log('登录', data)
            var retype = data.data[0].roleType[0].orgType
            var newType = 0
            console.log('retype', retype);
            switch (retype) {
              case 5:
                newType = 1
                break;
              case 6:
                newType = 2
                break;
              case 7:
                newType = 3
                break;
              case 8:
                newType = 4
                break;
              case 9:
                newType = 5
                break;
              case 10:
                newType = 6
                break;
              case 11:
                newType = 7
                break;
              default:
                break;
            }
            console.log('newType', newType);
            localStorage.setItem('gradeType', newType);

            this.userMsg = {
              accountId: data.data[0].roleType[0].accountId,
              orgId: data.data[0].roleType[0].orgId,
              userId: data.data[0].id
            }
            this.reqMsg = {
              orgCode: data.data[0].roleType[0].orgId,
              userId: data.data[0].id,
              userName: data.data[0].name,
              orgType: data.data[0].roleType[0].orgType,
              headImgUrl: data.data[0].headImgUrl
            }
            sessionStorage.setItem('userMsg', JSON.stringify(this.reqMsg))
            if (data && data.errorCode === '0') {
              this.$http({
                url: this.$http.userUrl('getOpenLoginToken'),
                method: 'get',
                params: this.userMsg
              }).then(res => {
                console.log('getOpenLoginToken', res)
                // 请求成功
                // 存token
                sessionStorage.setItem('token', JSON.stringify(res.data.data))
                this.$router.replace({ name: 'home' })
              })
            } else {
              this.getCaptcha()
              // this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 选项卡
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.yan {
  display: block;
  width: 1.2552rem;
  height: 0.3177rem;
  margin: 0 auto;
  margin-top: 0.2031rem;
  margin-bottom: 0.1302rem;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: #f7fbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  .login_box {
    width: 81%;

    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.1042rem;
    overflow: hidden;
    box-shadow: 0rem 0.0365rem 0.1406rem rgba(133, 169, 231, 0.51);
    .left {
      width: 45%;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .right {
      // display: flex;
      // justify-content: center;
      width: 55%;
      box-sizing: border-box;
      padding: 2% 7% 4% 9%;
      background: #ffffff;
      .account {
        display: flex;
        justify-content: space-between;
        margin-top: 0.1667rem;
      }

      .form {
        height: 100%;
        width: 100%;
        /deep/ input {
          height: 0.3125rem;
          width: 100%;
          border-radius: 0.0625rem;
        }
        /deep/ .el-input__prefix {
          display: flex !important;
          align-items: center;
          justify-content: center;
        }
        .code {
          width: 100%;
          height: 100%;
          position: relative;
          .key {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(-50%, -50%);
            img {
              width: 0.6875rem;
              height: 0.1771rem;
              position: absolute;
              top: -0.2865rem;
              left: -0.7188rem;
            }
            .keyspan {
              font-size: 0.0729rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #4876e7;
            }
          }
        }
        .auxiliary {
          display: flex;
          justify-content: space-between;
          span {
            font-size: 0.0729rem;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
          }
        }
      }
      .btn {
        width: 100%;
        height: 0.3125rem;
        background: #0fdd8d;
        border: none;
        border-radius: 0.0625rem;
        font-size: 0.125rem;
        a {
          font-size: 0.0833rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 0.4271rem;
          color: #ffffff;
          letter-spacing: 0.1563rem;
        }
      }
    }
  }
}
.lv {
  color: #0fdd8d;
  font-size: 0.0729rem;
}
.hui {
  color: #888888;
  font-size: 0.0729rem;
}
.el-tabs {
  /deep/.el-tabs__item.is-active {
    color: #0fdd8d;
    font-size: 0.1458rem;
    border-bottom: 0.0104rem solid #0fdd8d;
  }
  /deep/.el-tabs__item:hover {
    color: #0fdd8d;
  }
  /deep/.el-tabs__item {
    color: #888888;
    font-size: 0.125rem;
    height: 0.3646rem;
    line-height: 0.3646rem;
  }
  /deep/.el-tabs__nav > .el-tabs__active-bar {
    display: none;
  }
  /deep/.el-tabs__nav-wrap::after {
    bottom: 0.0104rem;
  }
}
</style>
